<div class="container">
  <!-- header -->
  <acme-navbar creation-date="main.creationDate"></acme-navbar>
   <!-- header -->

  <!-- content -->
  <div class="app-content app-content-body">
    <div class="hbox hbox-auto-xs hbox-auto-sm">   
      <!-- search -->
      <div class="row">
        <div class="col-sm-12 wrapper">
          <lighter-search></lighter-search>
        </div>
      </div>
       <!-- /search -->
      <!-- list -->
      <div class="row">
        <div class="col-sm-12">
          <table class="table table-striped table-bordered table-hover table-drivers text-md">
            
              <thead>
                <tr>
                  <th ng-repeat="column in main.columns" ng-if="!column.hidden" ng-click="main.sort.toggle(column)" ng-class="{'sortable':column.sortable !== false}">
                    {{column.label}}
                    <i ng-if="column.name === main.sort.column && main.sort.direction" class="glyphicon {{main.sort.direction|orderClass}}"></i>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in main.items|filter:main.filter|orderBy:main.sort.column:main.sort.direction===-1|paging:main.page.index:main.page.size">
                  <td width="10%">
                    <a href ui-sref="topic({id:item.id})">{{item.id}}</a>
                  </td>
                  <td width="22.5%">{{item.title}}</td>
                  <td class="text-right" width="22.5%">{{item.visit_count|number}}</td>
                  <td class="text-right" width="22.5%">{{item.reply_count|number}}</td>
                  <td width="22.5%">{{item.create_at}}</td>
                </tr>
              </tbody>
          </table>
          <div class="text-center">
            <ul uib-pagination total-items="main.items|filter:main.filter|size" ng-model="main.page.index" max-size="8" items-per-page="main.page.size" boundary-links="true"></ul>
          </div>
            
        </div>
      </div>
      <!-- /list -->
    </div>
  </div>
  <!-- /content -->

</div>
